<template>
<div class="layout-main">
<pullRefresh class="layout-box" style="padding-top:0.3rem;" v-model="isLoading" @refresh="onRefresh">
<div class="index">
<van-swipe @change="onChange" class="w index-bar" :duration="300"  :autoplay="5000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img class="w login-bar-img" v-lazy="image" />
  </van-swipe-item>
  <template #indicator>
    <div class="custom-indicator">
      <span v-for="(image, index) in images" :class="{'cur':index==current}" :key="index"></span>
    </div>
  </template>
</van-swipe>
<div class="res-box">
  <div class="res-tit w"><del></del>相关 <span class="more hover">更多</span></div>
  <div class="res-main">
    <div class="res-li hover" v-for="item in list" :key="item.id">
			 <img lass="res-li-img" v-lazy="setImgUrl(item.resUrl)" />
        <div class="res-li-bd">
          <div class="tit" v-html="item.resContent"></div>
        </div>     
    </div>       
  </div>  
</div>   
  
</div>
</pullRefresh>
</div>
</template>
<script>
import pullRefresh from '@/components/pullRefresh.vue';
import api from "@/global/api";

export default {
  components: {pullRefresh},
  data() {
    return {
      images:[],
			current: 0,
			isLoading:false,
			list:[]
    };
  },  
  mounted() {
		this.getDataPic();
		this.getData();
  },
	activated(){},
  methods: {
    getDataPic(){
      this.images = [
				'https://www.doapis.com/doapis//public/resources/1625043676791.jpg',
				'https://www.doapis.com/doapis//public/resources/1625042624564.jpg'	
      ]	
    },
    onChange(index) {
      this.current = index;
    }, 		
		async getData(){
			let res = await this.$http.get(api.getChannel,{params:{channel:'channel'}});
			this.list = res.data.data.pageData.card;
		},
		setImgUrl(val){
			return api.host+val;	
		},	
  	onRefresh() {
      setTimeout(() => {
				this.isLoading = false;
      }, 800);
    },	   
  },
	 
}
</script>
<style scoped>
.index{ width:7.5rem;}
.index-bar{ height: 3.5rem; position:relative; overflow:hidden; }
.login-bar-img{ height:3rem; display:block; border-radius:2px;}
.custom-indicator{ position: absolute; width: 100%; bottom:-0.5rem; height: 1rem; text-align: center;}
.custom-indicator span{ transition:all ease 0.2s; border-radius:0.06rem; margin: 0 0.05rem; display: inline-block; width: 0.12rem; height: 0.12rem; background: #D4D8DA;}
.custom-indicator span.cur{ background: #1AA5FE; width: 0.35rem;}

.res-tit{font-size:0.36rem; color: #3A3C3D; height: 1rem; line-height: 1rem;}
.res-tit del{ margin:0.3rem 0.15rem 0 0; float: left; width: 0.06rem; height: 0.35rem; background:#1AA5FE; border-radius: 0.15rem; }
.res-tit .more{ float: right; color:#999;  font-size: 0.28rem; padding-right:0.3rem; background: url(../../assets/go-more.png) no-repeat right 0.32rem; background-size:0.28rem 0.3rem;}
.res-main{column-count:2;  padding:0 0.35rem 0.25rem;}

.res-li{  break-inside: avoid;  width: 3.35rem; margin:0 0 0.2rem 0;  border-radius:0.12rem;box-shadow: 0 4px 10px 0 rgba(56,58,61,0.10); overflow: hidden;}
.res-li-img{ width: 100%; height: 1.84rem;}
.res-li-bd{ box-sizing: border-box; padding: 0.2rem; }
.res-li-bd .tit{ font-size: 0.24rem; color: #999; line-height: 0.4rem; margin-bottom: 0.1rem;}
.res-li-bd .tit >>> h4{ display:none;}
.res-li-bd .name, .res-li-bd .num{ width: 50%; height: 0.32rem; font-size: 0.24rem; color: #606365; line-height:32px; float: left;}
.res-li-bd .num{ text-align: right;}
.res-tips{ width: 1rem; height: 1rem; background:rgba(26,165,254,1); box-shadow:0px 8px 20px 0px rgba(56,58,61,0.2); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: fixed; right: 0.32rem; top: calc(100vh - 2.34rem);}
.res-tips span{ font-size: 0.28rem; color: #FDFDFD; line-height: 0.32rem;}

</style>